<style>
	.layui-form-label {
	    width: 130px;

	}
	.layui-input-block {
	    margin-left: 140px;

	}
</style>
<div class="main">
	<div class="container" style="margin-bottom: 20px;">
		<div id="slideBox" class="slideBox2">
			<div class="hd">
				<ul>
					{volist name="banner" id="item"}
					<li></li>
					{/volist}
				</ul>
			</div>
			<div class="bd">
				<ul>
					{volist name="banner" id="item"}
					<li><a href="{$item.url}" target="_blank"><img src="{$item.image}" /></a></li>
					{/volist}
				</ul>
			</div>

			<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
			<a class="prev" href="javascript:void(0)"></a>
			<a class="next" href="javascript:void(0)"></a>
		</div>
		
		<div style="background:#fff;min-height: 800px; margin: 20px 0; padding: 20px;">
			<div class="arc_bd">
				<div class="user_center_right_bd" style="display: flex;align-items: center;justify-content: center;">
						<div class="center_form">
							<form class="layui-form" action="">
								{:token()}
								<div class="layui-form-item">
									<label class="layui-form-label"><span class="layui-font-red">*</span> 文章题目</label>
									<div class="layui-input-block">
										<textarea placeholder="请输入文章题目" id="title" class="layui-textarea"></textarea>	
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"><span class="layui-font-red">*</span> 作者</label>
									<div class="layui-input-block">
										<input type="text" id="author" lay-verify="required"
											placeholder="请输入作者姓名" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"><span class="layui-font-red">*</span> 联系电话</label>
									<div class="layui-input-block">
										<input type="text" id="tel" lay-verify="required"
											placeholder="请输入联系电话" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"><span class="layui-font-red">*</span> 邮箱或微信号</label>
									<div class="layui-input-block">
										<input type="text" id="contact" name="contact" lay-verify="required"
											placeholder="请输入邮箱或微信号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
								   <label class="layui-form-label layui-padding-0"><span class="layui-font-red">*</span> 文件上传</label>
								   <div class="layui-input-block">
								     <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-btn-2">
								         <i class="layui-icon layui-icon-upload"></i> 多文件上传
								       </button> 
								       <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
								         附件：
								         <div class="layui-upload-list" id="upload-demo-preview"></div>
								      </blockquote>
								   </div>
								 </div>
							</form>
							<div class="btn" style="margin-top:30px;">
								<button type="button"
									class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-normal layui-btn-radius"
									onclick="submit()">提交</button>
							</div>
						</div>
					</div>
				
			</div>
		</div>
		
	</div>
</div>
<script>
	jQuery(".slideBox2").slide({
		mainCell: ".bd ul",
		autoPlay: true
	});
</script>
<script>
	    var upload_files=[];
		$(function(){
			$("#textarea").bind('input propertychange', function() {
				$('#textarea_num').html($(this).val().length + '/50');
			});
			
		});
		
		layui.use(function(){
		  var upload = layui.upload;
		  var layer = layui.layer;
		  var element = layui.element;
		  var $ = layui.$;
		  // 多图片上传
		    upload.render({
		      elem: '#ID-upload-demo-btn-2',
		      url: '/api.php/common/upload', // 实际使用时改成您自己的上传接口即可。
		      accept: 'file',
		      exts:'doc|docx|pdf|jpg|png',
		      multiple: true,
		      before: function(obj){
		        // 预读本地文件示例，不支持ie8
		        obj.preview(function(index, file, result){
		          $('#upload-demo-preview').append('<div>'+file.name+'</div>')
		        });
		      },
		      done: function(res){
		        // 上传完毕
		        console.log(res);
				upload_files.push(res.data.url);
		      }
		    });
		  
		});
		
		function submit(){
		    if($('#title').val().trim()==''){
			    layer.msg('请填写文章题目',{icon:5});return false;
		    }
		    if($('#author').val().trim()==''){
		  	    layer.msg('请填写作者',{icon:5});return false;
		    }
		    if($('#tel').val().trim()==''){
		  	    layer.msg('请填写联系电话',{icon:5});return false;
		    }
		    if($('#contact').val().trim()==''){
		  	    layer.msg('请填写邮箱或微信号',{icon:5});return false;
		    }
            if(upload_files.length==0){
                layer.msg('请上传附件文档', {icon: 5});
                return false;
            }
            $.ajax({
                  type:"POST",
                  url:"/api.php/index/submit_tougao",
                  dataType:"json",
                  data:{
                      'title':$('#title').val().trim(),
                      'author':$('#author').val().trim(),
                      'tel':$('#tel').val().trim(),
                      'contact':$('#contact').val().trim(),
                      "files":upload_files.join(','),

                  },
                  success:function(res){
                      console.log(res);
        
                      if(res.code==0){
                          layer.msg(res.msg,{icon:5});
            
                      }else{
                          layer.msg(res.msg,{icon:6},function(){
        
            				  window.location.href="{:url('zhuanyeshukan/tougao_result')}";
                          });
                      }
                  }
              });
            
        }
	</script>